import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View,Text} from '@tarojs/components'
import { Button,Field } from '@antmjs/vantui'
import { connect } from 'react-redux'
import List from './components/list';
import { LoadVarietyActionAsync} from '../../redux/action/VarietyAction';
import { ClearShoppingAction} from '../../redux/action/shoppingAction';
import { ChangeLoadingAction } from '../../redux/action/loadingAction';
import Loading from '../../components/Loading/index'
import http from '../../service/http'
import dev from '../../../config/dev';
import './index.less'

const isH5 = process.env.TARO_ENV === 'h5'


@connect(	state => ({
    varietyList:state.varietyList,
    shoppingCart:state.shoppingCart
	}),
	{LoadVarietyActionAsync,ClearShoppingAction}
)
class OrderDetailed extends Component {
  state={
    order:null,
    menuList:[]
  }

  // UNSAFE_componentWillMount () { console.log('UNSAFE_componentWillMount,组件还没挂载前');if(isH5){console.log('你当前环境为H5')} }

  // componentDidMount () { console.log('componentDidMount,组件挂载后');}

  // shouldComponentUpdate (nextProps,nextState) { console.log('shouldComponentUpdate,组件是否需要更新',nextProps,nextState);return true }

  // componentWillUnmount () { console.log('componentWillUnmount,组件卸载前') }

  // componentDidShow () { console.log('componentDidShow,组件显示后') }

  // componentDidHide () { console.log('componentDidHide,组件隐藏后') }

    // onLoad
  async onLoad (options) {
    this.setState({orderId:options.orderId})
    Taro.showLoading({
      title: '加载中',
    })
    let {data}=await http.selectOrder({orderID:options.orderId})
    let res=await http.menuListOrder({orderID:options.orderId})
    let res2=await http.getTable({id:data.tablenumId})
    let data2=res.data
    this.setState({order:{...data,tableNumName:res2.data.name},menuList:data2})
    Taro.hideLoading()
  }

  // onReady
  onReady () {}

  // 对应 onShow
  componentDidShow () {}

  // 对应 onHide
  componentDidHide () {}

  sum=()=>{
    let money=0.00
    this.state.menuList.forEach((item,index)=>{
      money=(item.num*item.price*100)/100+money
    })
    return money
  }
  // 对应 onPullDownRefresh，除了 componentDidShow/componentDidHide 之外，
  // 所有页面生命周期函数名都与小程序相对应
  onPullDownRefresh () {}
  render () {
    return (
      <View style={{height:'100vh'}}>
        <View style={{height:'100vh',overflowY:'auto',backgroundColor:'#f2f2f2'}}>
          <View style={{height:'25vh',backgroundColor:'#1989fa',padding:'40rpx'}}>
            <View style={{fontSize:'36rpx',fontWeight:'800',color:'#fff'}}>订单编号：{this.state.orderId?this.state.orderId:''}</View>
            <View style={{fontSize:'30rpx',marginTop:'25rpx',color:'#fff'}}>订单时间：{this.state.order?this.state.order.time:''}</View>
            <View style={{fontSize:'30rpx',marginTop:'25rpx',color:'#fff'}}>用餐人数：{this.state.order?this.state.order.peopleNum:''}   {this.state.order?('('+this.state.order.tableNumName+')'):''}</View>
          </View>
          <View style={{minHeight:'75vh',position:'relative'}}>
            <View style={{
              position:'absolute',
              top:'-100rpx',
              left:'0'
            }}
            >
              <View style={{
                minHeight:'500rpx',
                width:'670rpx',
                backgroundColor:'#fff',
                margin:'0 40rpx 20rpx 40rpx',
                borderRadius:'15rpx'
              }}
              >
                {
                  this.state.menuList.map((item2,index)=>{
                    return item2.num>0?<List key={index} obj={item2} not></List>:null
                  })
                }
                <View style={{padding:'30rpx',fontSize:'30rpx',fontWeight:'800'}}>总计：{this.state.order?this.state.order.money:''}元</View>
              </View>
              <View style={{
                width:'670rpx',
                backgroundColor:'#fff',
                margin:'0 40rpx 20rpx 40rpx',
                borderRadius:'15rpx'
              }}
              >
                <Field
                  label='备注'
                  placeholder='无'
                  style={{borderRadius:'15rpx'}}
                  value={this.state.order?this.state.order.remarks:'无'}
                  disabled
                  onChange={(e)=>{
                    this.setState({remarks:e.detail})
                  }}
                />
                <Field
                  clearable
                  label='餐具份数'
                  disabled
                  value={this.state.order?this.state.order.peopleNum:''}
                  style={{borderRadius:'15rpx'}}
                />
              </View>
            </View>
          </View>
        </View>
        <Loading></Loading>
      </View>
    )
  }
}
OrderDetailed.defaultProps = {}
export default OrderDetailed

